<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>简单的评分</title>
<style>
.row{
margin-top: 30px;
border: 1px solid #eee;
padding-top: 12px;
padding-bottom: 12px;
position: relative;
}
.col{
display: inline-block;
bottom: 0;
width: 8%;
}

</style>
<div id="app" class="row">
	<div class="col">总分：{{total}}</div>
	
<div class="col" v-for="(student,i) in group">
<div>{{student.score}}分</div>
<div :style="{width:'30px',height:5+student.score+'px',
 background:'red'}"></div>
<button @click="add(i)">{{student.name}}</button>
</div>

</head>
<body>
<script>
new Vue({
el:"#app",
data:{
	group:[
	{name:"张三",score:0},
	{name:"李四",score:0},
	{name:"王五",score:0},
	],
	// name:"张三+5",
	// score:0
	total:0
},
computed:{
	gettotal:function(){
		
		
	 var sum=this.group.reduce(function(t,c){
		// (total,currentValue)
			return t+c.score;
		},0);
		this.total=sum;
	// 	var sum=0;
	// 	for(let student of this.group){
	// 		sum+=student.score
		
	// 	};
	// 	this.total=sum;
	}
},
methods:{
	add:function(i){
		this.group[i].score+=3
		this.gettotal;
	}
},
})
</script>
</body>
</html>
